<template>
  <div v-if="Object.keys(goods).length !== 0">
    <div class="title">{{goods.title}}</div>
    <div class="price">
      <span class="price_1">{{goods.newPrice}}</span>
      <span class="price_2">{{goods.oldPrice}}</span>
      <span class="price_3" v-if="goods.discount">{{goods.discount}}</span>
    </div>
    <div class="discount">
      <span class="discount_1">{{c0}}</span>
      <span class="discount_2">{{c1}}</span>
      <span class="discount_3">{{c2}}</span>
    </div>
    <div class="serves-wrap">
			<div v-for="index in goods.services.length-1" :key="index"> 
				<img :src="goods.services[index-1].icon" alt=""> 
				{{goods.services[index-1].name}}
			</div>
		</div>
  </div>
</template>

<script>
export default {
props:{
  goods:{
    type:Object,
    default(){
      return{}
    }
  }
},
computed:{
  c0(){
    return this.goods.columns[0]
  },
  c1(){
    return this.goods.columns[1]
  },
  c2(){
    return this.goods.columns[2]
  }
}

}

</script>

<style scoped>
.title{
  font-size: 18px;
  font-weight: 500;
  text-indent: 5px;
  margin:10px 3px 5px 5px ;
  color: #000;
}
.price{
  margin-bottom: 20px;
}
.price_1{
  color: rgb(218, 103, 132);
  font-size: 25px;
  margin-left:5px ;
}
.price_2{
color: rgb(83, 79, 79);
text-decoration: line-through;
margin-left:4px ;
font-size: 15px;
}
.price_3{
  display:inline-block;
  color: aliceblue;
  background-color: rgb(201, 113, 113);
  font-size: 5px;
  height: 15px;
  line-height: 35%;
  border-radius:100px ;
  position: relative;
  bottom: 9px;
  left: 3px;
}
.discount{
  position: relative;
  font-size: 14px;
  color: rgb(116, 116, 116);
  margin: 0 5px;
  padding-bottom:3px ;
  border-bottom: rgba(207, 199, 199, 0.555) solid 1px;
  overflow: hidden;
}
.discount_1{
  float: left;
}
.discount_2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-58%);

}
.discount_3{
  float: right;
}
.serves-wrap {
	display: flex;
	font-size: 12px;
	color: #333;
	padding: 16px 4px;
	justify-content: space-between;
	border-bottom: 4px solid #ededed;
}
.serves-wrap	img {
	width: 12px;
	height: 12px;
	vertical-align: middle;
}
</style>